{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}
<title>话题 -- 围脖blog</title>
{% endblock %}


{% block right %}
{% if topics %}
{% for t in topics %}
<div class="panel panel-default col-xs-3 text-center" style="width: 158px;height: 158px; margin-right: 10px;">
    <div class="title" style="position:absolute;left:125px;top:5px;"><span class="badge" style="background-color: #4682b4">{{ Post.query.filter_by(tpoic=t.id).count() }}</span></div>
    <div class="panel-body" style="font-size: 60px">
        <a href="{{ url_for('main.topic',topic=t.topic) }}"><img src="{{ url_for('static',filename='topics/'+t.img) }}" class="img-circle" style="width: 80px;height: 80px;">
        <p style="font-size: 16px;margin-top:10px">{{ t.topic }}</p></a>
    </div>
</div>
{% endfor %}
{% endif %}

<div class="panel panel-default col-xs-3 text-center" style="width: 160px;height: 160px;">
    <div class="panel-body" style="font-size: 60px">
        <a data-toggle="modal" href="#add-topic"><span class="glyphicon glyphicon-plus"></span>
    <p style="font-size: 16px;margin-top:10px">新话题</p></a>
    </div>

</div>
{% endblock %}

{% block modal %}
{{ super() }}
<!-- 模态框（Modal） -->
<div class="modal fade" id="add-topic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加话题</h4>
            </div>
            <div class="modal-body">
                {% if current_user.is_authenticated %}
            	{{ wtf.quick_form(form) }}
                {% else %}
                请登录后进行此操作
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                {% if current_user.is_authenticated %}
                <button type="submit" class="btn btn-primary" onclick="load()">提交</button>
                <script>
                function load(){
                    //下面两种方法效果是一样的
                    // document.getElementById("target").onclick();
                    document.getElementById("submit1").click();
                }
                document.getElementById("submit1").style.display="none"
                </script>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

